/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity } from 'react-native';
import styled from 'styled-components';
import LinearGradient from 'react-native-linear-gradient';
// import { getToken } from '../../utils/auth';
import { Actions } from 'react-native-router-flux';

export default class sportsRankings extends Component {
  state = {
    title: '教育谈话',
    imgUrl: require('../../../assets/work/sportsRankings/backtrack.png'),
    talkList: [
      {
        label: '谈话记录',
        icon: require('../../../assets/work/eduTalk/chatHistory.png'),
        childAction() {
          Actions.talkHistory();
        }
      },
      {
        label: '部门未谈人员',
        icon: require('../../../assets/work/eduTalk/noTalkPeopleList.png')
      },
      {
        label: '上传失败列表',
        icon: require('../../../assets/work/eduTalk/uploadFailed.png')
      },
      {
        label: '谈话汇总',
        icon: require('../../../assets/work/eduTalk/talkSummary.png'),
        childAction() {
          Actions.talkTotal();
        }
      }
    ]
  };

  render() {
    return (
      <View
        style={{
          flex: 1
        }}>
        <View style={styles.header}>
          <TouchableOpacity
            style={{ width: 25.67, height: 22.33 }}
            onPress={() => Actions.pop()}>
            <View>
              <Image
                source={this.state.imgUrl}
                style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
              />
            </View>
          </TouchableOpacity>
          <Text
            style={{
              fontSize: 30,
              fontWeight: 'bold',
              borderBottomColor: '#EDEDED',
              borderBottomWidth: 1,
              borderBottomStyle: 'dashed'
            }}>
            {this.state.title}
          </Text>
        </View>
        {/* <View> */}
        <View
          style={{
            height: 311,
            alignItems: 'center',
            justifyContent: 'center',
            // padding: 12.33,
            backgroundColor: '#FFFFFF',
            boxSizing: 'border-box',
            marginBottom: 6.67
          }}>
          <View
            style={{
              borderColor: '#000',
              borderWidth: 1,
              borderStyle: 'dashed',
              borderRadius: 0.1,
              marginBottom: 23.67,
              padding: 5
            }}>
            <Image
              source={require('../../../assets/work/eduTalk/eduTalkCenter.png')}
              style={{
                width: 203.33,
                height: 163.33,
                marginBottom: 5
              }}
            />
          </View>
          <Text style={{ fontSize: 18, color: '#333333' }}>针对性交流思想</Text>
          <Text style={{ fontSize: 12, color: '#cbcbcb' }}>
            录音保存，重复复听
          </Text>
          <CustomLinearGradient
            colors={['#51B6FC', '#7666FE']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}>
            <OnTouchableOpacity
              style={{
                width: 140.33,
                height: 29.33
              }}
              onPress={() => Actions.talkDetail()}>
              <View>
                <Image
                  source={require('../../../assets/work/eduTalk/QRCode.png')}
                  style={{ width: 11.33, height: 10.67, marginRight: 5 }}
                />
              </View>
              <Text style={{ color: '#fff', fontSize: 12 }}>开始教育谈话</Text>
            </OnTouchableOpacity>
          </CustomLinearGradient>
        </View>
        <View
          style={{
            flex: 1,
            backgroundColor: '#fff',
            paddingTop: 33.33,
            paddingLeft: 13
          }}>
          <Text style={{ fontSize: 16 }}>谈话详情</Text>
          <View style={{ flexDirection: 'row', marginTop: 16.67 }}>
            {this.state.talkList.map(e => (
              <View
                style={{
                  width: '25%',
                  justifyContent: 'center',
                  alignItems: 'center'
                }}>
                <TouchableOpacity
                  onPress={() => {
                    e.childAction();
                  }}>
                  <Image source={e.icon} style={{ width: 53, height: 53 }} />
                  <Text style={{ fontSize: 12, color: '#333333' }}>
                    {e.label}
                  </Text>
                </TouchableOpacity>
              </View>
            ))}
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: 98,
    backgroundColor: '#FFFFFF',
    padding: 19.33
    // boxSizing: 'border-box'
  }
});
const OnTouchableOpacity = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;
const CustomLinearGradient = styled(LinearGradient)`
  margin-left: 14;
  margin-top: 18.67;
  border-radius: 14.67;
`;
